<template>
  <div>
    <el-form ref="form" label-width="90px">
      <el-form-item label="SPU名称">
        <el-input :value="sku.spuName"></el-input>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格（元）">
        <el-input v-model="skuInfo.price" type="number"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input v-model="skuInfo.skuDesc" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="50px">
          <el-form-item :label="attr.attrName" v-for="(attr, index) in spuAttrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrValueAndId">
              <el-option :label="i.valueName" :value="`${attr.id}:${i.id}`" v-for="i in attr.attrValueList" :key="i.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="50px">
          <el-form-item :label="attrSale.saleAttrName" v-for="attrSale in spuSaleAttrList" :key="attrSale.id">
            <el-select v-model="attrSale.attrIdAndValueId" placeholder="placeholder">
              <el-option :label="i.saleAttrValueName" :value="`${attrSale.id}:${i.id}`"
                v-for="i in attrSale.spuSaleAttrValueList" :key="i.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table style="width: 100%" :data="spuImageList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80px">
          </el-table-column>
          <el-table-column label="图片" width="width">
            <template slot-scope="{row,$index}">
              <img :src="row.imgUrl" style="height:50px">
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{row,$index}">
              <el-button v-if="!row.isDefault"  type="primary" @click="changeIsDafult(row)">设置默认</el-button>
              <el-button v-else type="info">我是默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
         <el-button type="primary" @click="savaSkuAttr">保存</el-button>
         <el-button @click="changeScene">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'SkuForm',
  data() {
    return {
      spuImageList: [],
      spuSaleAttrList: [],
      spuAttrInfoList: [],
      skuInfo: {
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        skuName: '',
        price: 0,
        weight: '',
        skuDesc: '',
        skuAttrValueList: [],
        skuImageList: [],
        skuSaleAttrValueList: []
      },
      sku: {},
      tableData: {},
      skuDefaultImg:''
    }
  },
  methods: {
    async initSkuData(category1Id, category2Id, row) {
      console.log(11111, row);
      this.sku = row
      this.skuInfo.category3Id = row.category3Id
      this.skuInfo.spuId = row.id
      this.skuInfo.tmId = row.tmId
      let result = await this.$API.sku.reqSpuImageList(row.id)
      if (result.code == 200) {
        let a = result.data
        a.forEach(element => {
         this.$set(element,'isDefault',false)
        });
        this.spuImageList = a
      }
      let result1 = await this.$API.sku.reqSpuSaleAttrList(row.id)
      if (result1.code == 200) {
        this.spuSaleAttrList = result1.data
      }
      let result2 = await this.$API.sku.reqAttrInfoList(category1Id, category2Id, row.category3Id)
      if (result2.code == 200) {
        this.spuAttrInfoList = result2.data
      }
      console.log(11111, result, result1, result2);
    },
    handleSelectionChange(tableData) {
      this.tableData = tableData
    },
    changeScene() {
      this.$emit('cancelSpuForm1', 0)
      object.assign(this._data,this.$options.data)
    },
    changeIsDafult(row) {
      this.spuImageList.forEach((item) => {
        item.isDefault = false
      })
      row.isDefault = true
      this.skuDefaultImg=row.imgUrl
    },
    async savaSkuAttr(){
      const {spuSaleAttrList,spuAttrInfoList} =this
     this.skuInfo.skuAttrValueList= spuAttrInfoList.reduce((pre,item)=>{
        if(item.attrValueAndId){
            const [attrId,valueId] = item.attrValueAndId.split(":")
            pre.push({attrId,valueId})
        }
          return pre
      },[])
      this.skuInfo.skuSaleAttrValueList=spuSaleAttrList.reduce((pre,item)=>{
        if(item.attrIdAndValueId){
          const [saleAttrId,saleAttrValueId] = item.attrIdAndValueId.split(":")
          pre.push({saleAttrId,saleAttrValueId})
        }
        return pre
      },[])
      this.skuInfo.spuImageList=this.tableData.map(item=>{
        return{
          imgName:item.imgName,
          imgUrl:item.imgUrl,
          isDefault:item.isDefault,
          spuImagId:item.id,
          spuId:item.spuId
        }
      })
      let result = await this.$API.sku.reqAddSku(this.skuInfo)
      console.log(99999999,result);
      if(result.code==200){
        this.$message({type:'success',message:"保存成功"})
         this.$emit('cancelSpuForm1', 0)
      }
      console.log(11111,result,result1,result2);
    },
    handleSelectionChange(tableData){
      this.tableData=tableData
     console.log(tableData,1111111);
    },
    changeScene(){
      this.$emit("updateScene",2)
    },
  }

}
</script>

<style>
</style>